<script setup lang="ts">
import {PlusOutlined, CloseCircleOutlined} from '@ant-design/icons-vue'
import {message} from "ant-design-vue";
import {an} from "vitest/dist/types-b7007192";

const emit = defineEmits(['change', 'update:value']);
// 价格区间
const props = defineProps({
  max: {
    type: Number,
    default: 0,
  },
  maxSplit: {
    type: Number,
    default: 3,
  },
  value: {
    type: Array,
    default: () => [],
  },
  defaults: {
    type: Array,
    default: () => [],
  }
});
const range = ref<Array<any>>(props.value);
const reset = () => {
  // console.log(props.defaults?.length, props.defaults?.length > 0);
  if (props.defaults.length > 0) {
    range.value = props.defaults;
    emit('change', range.value);
    emit('update:value', range.value);
    return;
  }
  addValue.value = undefined;
  addState.value = false;
  if (props.max === 0) {
    range.value = [0];
  } else if (props.max == 1) {
    range.value = [0, 1];
  } else if (props.max == 2) {
    range.value = [0, 1, 2];
  } else if (props.max == 3) {
    range.value = [0, 1, 2, 3];
  } else {
    const list = [];
    const step = props.max / props.maxSplit;
    for (let i = 0; i <= props.maxSplit; i++) {
      list.push(parseFloat(((step * i)).toFixed(2)));
    }
    range.value = list;
  }
};
// 把价格区间分成4份
computed(() => reset());
const addState = ref(false);
const addValue = ref(undefined);
const add = () => {
  addState.value = true;
};
const del = (index: any) => {
  range.value.splice(index, 1);
  if (range.value.length === 1) {
    addState.value = false;
  }
};
const blur = () => {
  if (addValue.value) {
    if (addValue.value < range.value[range.value.length - 1]) {
      message.error(`不可小于[${range.value[range.value.length - 1]}]`);
      return false;
    }
    range.value.push(addValue.value);
  }
  addValue.value = undefined;
  addState.value = false;
}
watch(() => props.max, () => {
  if (props.max){
    reset();
  }
});
onMounted(() => {
  if (props.max) {
    reset();
  }
})
watch(() => range.value, () => {
  emit('change', range.value);
  emit('update:value', range.value);
}, {deep: true})
watch(() => props.value, () => {
  range.value = props.value;
}, {deep: true})
</script>

<template>
  <div style="display: inline-block;" v-for="(_,i) in range" :key="i">
    <div class="input">
      <a-input-number
          size="small"
          v-model:value="range[i]"
          style="width: 80px;"
          :min="range[i-1]||0"
          :max="range[i+1]||max"
      >
      </a-input-number>
      <CloseCircleOutlined class="delete" @click="del(i)"/>
    </div>
    <span v-if="i<range.length+1" style="margin-right: 5px;"> ~ </span>
  </div>
  <div style="display: inline-block;margin-right: 10px;">
    <a-button @click="add" size="small" v-if="!addState">
      <PlusOutlined/>
    </a-button>
    <a-input-number
        size="small"
        v-model:value="addValue"
        style="width: 80px;"
        v-if="addState" @blur="blur" @pressEnter="blur"
    />
  </div>
  <a-button size="small" type="primary" @click="reset">
    重置
  </a-button>
</template>

<style lang="less" scoped>
.input {
  display: inline-block;
  margin-right: 5px;
  position: relative;
  margin-bottom: 10px;

  .delete {
    position: absolute;
    right: -5px;
    top: -5px;

    &:hover {
      color: #1890ff;
    }
  }
}
</style>
